import React from "react";
import * as CustomIcons from "../CustomIcons";
import  Icon  from "@ant-design/icons";
import { WarningOutlined } from "@ant-design/icons";

interface CustomIconProps {
  icon?: string; // 改为可选属性
  className?: string;
  style?: React.CSSProperties;
}

const RenderIconsCustom: React.FC<CustomIconProps> = ({ icon, ...props }) => {
  // 1. 检查icon是否存在
  if (!icon) {
    console.warn("Icon name is undefined or empty");
    return <WarningOutlined />; // 返回一个默认图标
  }

  // 2. 安全访问CustomIcons
  const IconExport = (CustomIcons as Record<string, any>)[icon];

  if (!IconExport) {
    // console.warn(`Icon "${icon}" not found in CustomIcons`);
    // return <WarningOutlined />; // 返回一个默认图标
    return <div></div>; // 返回一个默认图标
  }

  // 3. 处理多种导出形式
  const IconComponent =
    React.isValidElement(IconExport) ? IconExport :
    typeof IconExport === 'function' ? IconExport :
    IconExport?.default;

  if (!IconComponent) {
    console.error(`Invalid icon format for "${icon}"`, IconExport);
    return <WarningOutlined />;
  }

  return <Icon component={IconComponent} {...props} />;
};

export default RenderIconsCustom;